<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Unbootstrap</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="unbootstrap.css" rel="stylesheet">
    <script type="text/javascript" src="//joes.googlecode.com/hg/joes.js"></script>

<style>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
</style>

  </head>

<header class="dark">
<h1 class="brand">Unbootstrap</h1>
<menu>
<ul>
<li><a href="#">base css</a></li>
<li><a href="#">components</a></li>
<li><a href="#">javascript</a></li>
<li><a href="#">examples</a></li>

</ul>

</menu>
</header>

    <div class="container">

<!-- Masthead
================================================== -->
<div class="jumbotron masthead center">

    <h1 class="bigtext">Unbootstrap</h1>
    <p class="notsobigtext">Simple and small HTML5, CSS, and Javascript for nerds, autists and completly ignorant bastards.</p>
    <p class="download-info">
      <a href="https://github.com/twitter/bootstrap/" class="btn btn-primary btn-large" >Don't click here</a>
      <a href="https://code.google.com/p/unbootstrap/source/checkout" class="btn btn-large" >Get Unbootstrap <small>(v0.1)</small></a>
    </p>


</div>

<hr/>

<hgroup class="center">
  <h1>Designed for unicorns, pixies and <strike>index fingers</strike> people.</h1>
  <h2>Well at least we've got your attention...</h2>
</hgroup>
  <div class="row">
    <div class="span4">

      <h2 class="icon-user">Pure HTML5</h2>
      <p>Take advantage of the HTML5 syntax and minimize your tags.</p>
    </div>
    <div class="span4">
     <h2 class="icon-ok">Super simple &amp; Fun</h2>
      <p>Just like Bootstrap is designed, unbootstrap se it as a complete kit or use to start something more complex.</p>
    </div>
    <div class="span4">
      <h2 class="icon-call">Cross-everything</h2>
      <p>Tablets, phone's, TV's and the desktop. And legacy browsers</p>
    </div>
  </div><!--/row-->
  <div class="row">
    <div class="span4">
 
      <h2>Bootstrap compatible</h2>
      <p>Unbootstrap is not as cool and advanced as Bootstrap. But you might be pleasent surprissed if you change your current bootstrapped template with unbootstrap</p>
    </div>
    <div class="span4">

      <h2>Responsive design</h2>
      <p>Responsive by default. Resize this window the find out.</p>
    </div>
    <div class="span4">

      <h2>Accessible</h2>
      <p>HPIA compliant.</p>
    </div>
  </div><!--/row-->
  <div class="row">
    <div class="span4">

      <h2>CDN</h2>
      <p>Only 10kb (unminified), just use this as an CDN.</p>
    </div>
    <div class="span4">
      <h2>Javascript Agnostic</h2>
      <p>What good is an awesome design component without easy-to-use, proper, and extensible interactions? With Bootstrap, you get custom-built jQuery plugins to bring your projects to life.</p>
    </div>
    <div class="span4">

      <h2>Unicode Images</h2>
      <p>However not fully supported on al devices. <a href="http://en.wikipedia.org/wiki/Mapping_of_Unicode_characters">Unicode Characters</a></p>
    </div>
  </div><!--/row-->
  <div class="row">
    <div class="span3">

      <h3>HTML5</h3>
      <p>Built to support new HTML5 elements and syntax.</p>
    </div>
    <div class="span3">

      <h3>CSS3</h3>
      <p>Progressively enhanced components for ultimate style.</p>
    </div>
    <div class="span3">

      <h3>Open-source</h3>
      <p>Built for and maintained by the community via <a href="https://github.com">GitHub</a>.</p>
    </div>
    <div class="span3">

      <h3>Made by JK</h3>
      <p>Your friendly autist .</p>
    </div>
  </div><!--/row-->

  <hr class="soften">

  <h1>Built with Bootstrap.</h1>
  <p class="marketing-byline">For even more sites built with Unbootstrap, <a href="http://builtwithbootstrap.tumblr.com/" target="_blank">visit the unofficial Tumblr</a> or <a href="./examples.html">browse the examples</a>.</p>
  <ul class="thumbnails example-sites">
    <li class="span3">
      <a class="thumbnail" href="http://soundready.fm/" target="_blank">
        <img src="assets/img/example-sites/soundready.png" alt="SoundReady.fm">
      </a>
    </li>
    <li class="span3">
      <a class="thumbnail" href="http://kippt.com/" target="_blank">
        <img src="assets/img/example-sites/kippt.png" alt="Kippt">
      </a>
    </li>
    <li class="span3">
      <a class="thumbnail" href="http://www.fleetio.com/" target="_blank">
        <img src="assets/img/example-sites/fleetio.png" alt="Fleetio">
      </a>
    </li>
    <li class="span3">
      <a class="thumbnail" href="http://www.jshint.com/" target="_blank">
        <img src="assets/img/example-sites/jshint.png" alt="JS Hint">
      </a>
    </li>
  </ul>

</div><!-- /.marketing -->

     <!-- Footer
      ================================================== -->
      <footer>
        <p class="pull-right"><a href="#">Back to top</a></p>
        <p> licensed under <a href="http://www.gnu.org/licenses/lgpl.html">LGPL</a>.</p>
      </footer>

    </div><!-- /container -->



    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script type="text/javascript" src="//joes.googlecode.com/hg/timon.js"></script>

  </body>
</html>

